import React, { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { LoginWrapper } from './style';
import { LoginData } from '@/assets/data';
import { RightCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

interface IProps {
  children?: ReactNode;
}

const Login: FC<IProps> = () => {
  const naviaget = useNavigate()
  const handleLoginItemCLick = (path: string) => {
    naviaget(path)
  }
  return <LoginWrapper>
    <div className="header-logImg">
      <img src={require("@/assets/img/yesplaymusic.png")} alt="coderkuPlaymusic" className='log' />
      <h3 className='svg-icon'>x</h3>
      <img src={require("@/assets/img/netease-music.png")} alt="网页云logo" className='log' />
    </div>
    <div className="login-content">
      {
        LoginData.map(item => (
          <div className="login-item" key={item.path} onClick={() => handleLoginItemCLick(item.path)}>
            <div className="login-info">
              <div className="login-title">{item.title}</div>
              <div className="login-message">{item.message}</div>
            </div>
            <div className="icon">
              <RightCircleOutlined style={{ color: 'rgb(51, 94, 234)', width: "24px", height: "24px" }} />
            </div>
          </div>
        ))
      }
    </div>
  </LoginWrapper>;
};

export default memo(Login);
